<template>
  <div class="chartContainer">
    <div class="top">
      <div class="box" v-for="item in weatherStore.weatherInfos" :key="item.date">
        <span>{{ item.week }}</span>
        <span>{{ item.date }}</span>
        <span>{{ item.dayweather }}</span>
        <span>风力 {{ item.daypower }}级</span>
      </div>
    </div>
    <div class="bottom">
      <v-chart :option="weatherStore.option"></v-chart>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useWeatherStore } from '@/stores/WeatherStore'
const weatherStore = useWeatherStore()
const route = useRoute()
onMounted(async () => {
  const key = route.params.key || ''
  await weatherStore.getWeatherData(key)
})
</script>

<style lang="scss" scoped>
.chartContainer {
  width: 100%;
  padding: 40px 48px 0 48px;
  border-radius: 10px;
  background: #224d6e;
  gap: 50px;
  .top {
    display: flex;
    justify-content: space-between;
    color: white;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      min-width: 200px;
    }
  }
  .bottom {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    v-chart {
      width: 100%;
      height: 300px;
    }
  }
}
</style>
